<template>
    <div class="container-fluid">
        <TopBar></TopBar>
        <div class="box">
            <p class="h1">{{ programStore.nowProgram.title }}</p>
            <figure class="text-center">
                <blockquote class="blockquote">
                    <p>{{ programStore.nowProgram.introduction }}</p>
                </blockquote>
                <figcaption class="blockquote-footer">
                    @ <cite title="Source Title">Passlink</cite>
                </figcaption>
            </figure>

            <div style="display:flex;justify-content: center;">
                <img :src="programStore.nowProgram.main_img" class="img-fluid" alt="没用的图片">
            </div>
            <br><br>
            <br><br>

            <!-- 项目进展 -->
            <div class="pro-box">

                <p class="h3">项目进展：</p>
                <div class="accordion" v-for="process in programStore.nowProgram.process_list">
                    <div class="accordion-item">
                        <h2 class="accordion-header" :id="'heading-' + process.process_id">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                :data-bs-target="'#collapse-' + process.process_id"
                                :aria-controls="'collapse-' + process.process_id">
                                 <code>{{process.create_time}}</code> &nbsp;&nbsp;&nbsp; {{ process.title }}  
                            </button>
                        </h2>
                        <div :id="'collapse-' + process.process_id" class="accordion-collapse collapse"
                            :aria-labelledby="'heading-' + process.process_id" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <p class="h4" style="color: black;">{{ process.title }}</p>
                                <span>{{ process.introduce }}</span>
                                <div style="display:flex;justify-content: center;">
                                    <div v-for="img in process.imgs">
                                        <img v-if="img.length>5" :src="img" class="img-thumbnail" alt="...">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <br><br>
        <br><br>
        <BottomBar></BottomBar>
    </div>
</template>
<script setup lang="ts">
import { ProgramStore } from "@/store/programs";
const programStore = ProgramStore()


</script>
<style lang="scss" scoped>
@media screen and (max-width: $passlink-media-max-width-5) {
  
    
  }
.container-fluid {
    background-color: $passlink-bg-color;

    .box {
        padding: 5px;
        width: 100%;
        background-color: $passlink-bg-color;
        height: auto;
        margin: auto;

        p {
            color: $passlink-font-color-white;
        }

        span {
            color: $passlink-font-color-black;
        }

        img {
            width: 60%;
        }

        .pro-box {
            padding: 10px;

            img {
                margin-top: 20px;
                width: 250px;
                margin: auto;
                border-radius: 20px;
            }

        }

    }
}</style>

